<script setup>
import {ref, onMounted,computed, watch} from 'vue';
import {fetchProductAttrCateList} from "@/api/productAttrCate.js";
import {fetchProductAttrList} from "@/api/productAttr.js";
import SingleUpload from "@/components/upload/singleUpload.vue";
import MultiUpload from "@/components/upload/multiUpload.vue";


// props 与 emits
const props = defineProps({
  productParam: {
    type: Object,
    required: true
  },
  isEdit: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(['prevStep', 'nextStep']);

const form3 = ref({})
const productAttrForm = ref(null)

//选中的商品属性
const selectProductAttr = ref([])
//选中的商品参数
const selectProductParam = ref([])
//选中的商品属性图片
const selectProductAttrPics = ref([]);
//可手动添加的商品属性
const addProductAttrValue = ref('')
    //商品富文本详情激活类型
const activeHtmlName= ref('pc')

onMounted(() => {
  getProductAttrCateList();
})
//是否有商品属性图片
const handleAttrPic = computed(() => {
  if (selectProductAttrPics.value.length < 1) {
    return false
  } else {
    return true
  }
})
//商品的编号
const productId = computed(() => {
  return props.productParam.id
})

// TODO: 商品属性类型列表
const productAttributeCategoryOptions = ref([]);
const getProductAttrCateList = async () => {
  let params = { pageNum: 1, pageSize: 100 }
  const res = await fetchProductAttrCateList(params).then(res => {
    productAttributeCategoryOptions.value = res.data.data.list;
    for (let i = 0; i < res.data.data.list.length; i++) {
      productAttributeCategoryOptions.value[i] = {
        label: res.data.data.list[i].name,
        value: res.data.data.list[i].id,
      }
    }
  })

}

const getInputListArr = (inputList) => {
  return inputList.split(',')
}


// 上一步按钮点击事件
const handlePrev3 = () => {
  emits('prevStep');
};

// 下一步按钮点击事件
const handleNext3 = () => {
  emits('nextStep');
};

// TODO: 监听 props.productParam
watch(() => props.productParam, (newVal) => {
      form3.value = {...newVal};
    },
    {immediate: true}
)
</script>

<template>
  <div style="margin-top: 50px;">
    <el-form :model="form3" ref="productAttrForm" label-width="120px" label-position="right">
      <el-form-item label="属性类型:">
        <el-select v-model="form3.productAttributeCategoryId"
                   @change="handleProductAttrChange"
                   placeholder="请选择属性类型">
          <el-option
            v-for="item in productAttributeCategoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品规格:">
        <el-card shadow="never" class="cardBg">
          <div v-for="(productAttr,idx) in selectProductAttr">
            {{productAttr.name}}：
            <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
              <el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
                           class="littleMarginLeft"></el-checkbox>
            </el-checkbox-group>
            <div v-else>
              <el-checkbox-group v-model="selectProductAttr[idx].values">
                <div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
                     class="littleMarginLeft">
                  <el-checkbox :label="item" :key="item"></el-checkbox>
                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
                  </el-button>
                </div>
              </el-checkbox-group>
              <el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
              <el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
            </div>
          </div>
        </el-card>
        <el-table style="width: 100%;margin-top: 20px"
                  :data="form3.skuStockList"
                  border>
          <el-table-column
              v-for="(item,index) in selectProductAttr"
              :label="item.name"
              :key="item.id"
              align="center">
            <template #default="{row}">
              {{getProductSkuSp(row,index)}}
            </template>
          </el-table-column>
          <el-table-column
              label="销售价格"
              width="100"
              align="center">
            <template #default="{row}">
              <el-input v-model="row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="促销价格"
              width="100"
              align="center">
            <template #default="{row}">
              <el-input v-model="row.promotionPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="商品库存"
              width="80"
              align="center">
            <template #default="{row}">
              <el-input v-model="row.stock"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="库存预警值"
              width="80"
              align="center">
            <template #default="{row}">
              <el-input v-model="row.lowStock"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="SKU编号"
              width="160"
              align="center">
            <template #default="{row}">
              <el-input v-model="row.skuCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="80"
              align="center">
            <template #default="{row}">
              <el-button
                  type="text"
                  @click="handleRemoveProductSku(row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
            type="primary"
            style="margin-top: 20px"
            @click="handleRefreshProductSkuList">刷新列表
        </el-button>
        <el-button
            type="primary"
            style="margin-top: 20px"
            @click="handleSyncProductSkuPrice">同步价格
        </el-button>
        <el-button
            type="primary"
            style="margin-top: 20px"
            @click="handleSyncProductSkuStock">同步库存
        </el-button>
      </el-form-item>
      <el-form-item label="属性图片:" v-if="handleAttrPic">
        <el-card shadow="never" class="cardBg">
          <div v-for="(item,index) in selectProductAttrPics">
            <span>{{item.name}}:</span>
            <single-upload v-model="item.pic"
                           style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item label="商品参数:">
        <el-card shadow="never" class="cardBg">
          <div v-for="(item,index) in selectProductAttrPics">
            <span>{{item.name}}:</span>
            <single-upload v-model="item.pic"
                           style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item label="商品相册:">
        <multi-upload v-model="selectProductPics"></multi-upload>
      </el-form-item>
      <el-form-item label="商品详情:">
        <el-tabs type="card" v-model="activeHtmlName">
          <el-tab-pane label="电脑端详情" name="pc">
          </el-tab-pane>
          <el-tab-pane label="移动端详情" name="mobile">
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item>
        <el-button @click="handlePrev3">上一步，填写商品信息</el-button>
        <el-button type="primary" @click="handleNext3">下一步，填写商品属性</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.cardBg {
  width: 100%;
  background: #F8F9FC;
}
</style>